TNotes.typescript

Appearance

0001. TS 是什么

0001. TS 是什么 ​

1. 🎯 本节内容 ​

  • TypeScript 简介

2. 🫧 评价 ​

对 TS 是什么有个初步了解即可，随着后续慢慢的学习，理解会逐步加深。

文中引用了一篇关于 JS 常见错误的文章，懒得看的话，可以直接看笔记中记录的 AI 解读。

3. 🤔 TypeScript 是什么？「民间定义」 ​

  • TypeScript（简称 TS）是微软公司开发的一种基于 JavaScript （简称 JS）语言的编程语言。
  • 它的目的并不是创造一种全新语言，而是增强 JavaScript 的功能，使其更适合多人合作的企业级项目。
  • TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本（但是可能会报错），此外它再增加了一些自己的语法。
  • TypeScript 对 JavaScript 添加的最主要部分，就是一个独立的类型系统。

4. 🤔 TypeScript 是什么？「官方定义」 ​

图 2

TypeScript is JavaScript with syntax for types.

TypeScript 是具有 类型语法 的 JavaScript。

图 1

JavaScript and More：TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.

使用 TypeScript 可以让你在 IDE 中更早发现那些很 low 的错误。

A Result You Can Trust：TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.

TS 最终会编译为 JS，但凡是 JS 能跑的宿主环境，TS 都能跑。

Safety at Scale：TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

TS 是一个很棒的 工具，它能够理解我们的 JS 代码，并 使用类型推断帮我们减少很多在 JS 中不必要的类型判断代码。

5. 🤔 学习 TS 都有哪些前置知识？ ​

  • JS、ES6+ 的相关内容。
  • 学习 TypeScript，必须先了解 JavaScript 的语法，因为真正的实际功能都是 JavaScript 引擎完成的，TypeScript 只是添加了一个类型系统。
  • 后续内容不会对 JS 的相关知识加以介绍，必要的时候简单提一嘴即可，重点介绍 TypeScript 引入的新语法，主要是类型系统。
  • 如果你对 JavaScript 还不熟悉，掌握好 JS。

6. 🤔 TypeScript 跟 JavaScript 是什么关系？「面试题」 ​

svg

一句话概括：

  • TypeScript 是 JavaScript 的超集，在 JavaScript 的基础上加了类型系统，让 JavaScript “随便”的类型变得更加“严谨”。

较为详细一丢丢的回答：

  • TypeScript 是一个单独的编程语言，但其语法是 JavaScript 的超集。TypeScript 增加了静态类型系统和其他语言特性到 JavaScript 上，这意味着你写的所有合法的 JavaScript 代码都是合法的 TypeScript 代码。
  • TypeScript 会遵循 ECMAScript 规范，并尝试与该规范保持一致。并且，TypeScript 可能会较早地采纳某些 ECMAScript 提议的特性。这意味着，开发者可以在 TypeScript 中提前使用一些正在处于提案阶段的 JavaScript 新特性，TypeScript 的编译器会帮我们做好转换工作，编译为当前广泛支持的 JavaScript 版本。

面试建议：

  • 面试的时候时不时会被问到这个问题，关键在于答出“超集”、“类型系统”。
    • 回答出“超集”，表示你知道从组成上看，“TS”比“JS”多出了一部分东西；
    • 回答出“类型系统”，表示你知道多出的这部分东西是 TS 的“类型系统”；
  • 其实对于这类比较宽泛的问题，能唠的点有很多，只管往深了说，深不下去就展开来说，能想起啥说啥，单是这一个问题想必就能唠不少时间。

7. 🤔 TypeScript 的出现是为了解决什么问题？「面试题」 ​

7.1. 面试场景 ​

  • 面试官：你能说一下 TS 的出现主要是为了解决什么问题吗？
  • 你：那肯定是解决 JS 无法解决或解决成本过高的问题啊！如果 JS 就能轻松解决，还要 TS 干啥！（如果你一点儿不了解 TS 可以这么忽悠~ 不管怎么说，这话是毛病的。）
  • 面试官：呦，回答得真好！那具体是哪些问题呢？
  • 你：……（如果再被追问，那就只能罗列出一些具体的问题了~）

7.2. 切入点 ​

下面一些回答该问题的思考切入点：

  • 可以列出一些 JS 类型上的问题，比如使用 var、let 定义的变量可以被赋予任意类型、函数参数可以接受任意类型、访问对象身上不存在的成员不会抛出错误、…… 等等。
  • 也可以把问题往 TS 和 JS 之间的差异上来引，指出 JS 是弱类型，TS 是强类型，然后去指出弱类型的一些缺点，强类型的一些优点
  • ……

7.3. JS 自身的一些问题 ​

JS 自身的一些问题如下：

  • TypeScript 的出现是为了解决 JavaScript 因自身特性而无法解决的一系列类型方面的“问题”。
    • 这里的问题刻意加上了引号，是因为在大多数小型项目中，JavaScript 中的这些“问题”，被很多开发者视作是 JavaScript 的优势，这显得 JavaScript 及其灵活，写起来很爽，几乎不报错（注：这里的不报错是指开发阶段 JS 语言服务不报错）。
    • 可是，当项目规模上去后，也许这些被视作 JavaScript 优势的，灵活行为，会让你犯很多非常低级的类型上的错误，并且大多数这样的低级类型上的错误，需要等到程序运行的时候才会被抛出。
  • 根据文章 rollbar，Top 10 JavaScript errors from 1000+ projects (and how to avoid them)，从 1000 个 JavaScript 项目中，统计出的 JavaScript 报错最多的前 10 个错误 内容得出的结论：在 JavaScript 中最常见的报错主要都是一些很低级的类型上的错误，而 TypeScript 所弥补的正是 JavaScript 灵活（“随意”）的类型问题。
    • 图 3

7.4. 参考回答 ​

  • TypeScript 主要是为了解决 JavaScript 在大型项目开发中的类型安全问题
  • JavaScript 是动态弱类型语言，变量类型随意切换，容易在运行时出现类型错误
  • 很多常见的错误，比如"Cannot read property of undefined"，都是因为缺乏类型检查导致的
  • TypeScript 通过静态类型系统，让我们在写代码的时候就能发现这些低级错误，而不是等到运行时
  • 同时还提供了更好的 IDE 支持，比如智能提示、自动补全、重构等，提高开发效率
  • 特别是在团队协作和大型项目中，TypeScript 的类型定义让代码更易维护和理解

8. 🤔 你学习 TS 的原因是？ ​

这一部分单纯用来记录一下个人的足迹 👣 -> 学习 TS 是因何而起的。

more

以下是驱动自己去学习 TS 的一些原因……

  • 开始是「被动」的。原因只有一个 -> 工作需要。
    • 22 年的年底，当时所在的公司要求上了一个“传秤工具”的桌面端项目，技术栈主要用到了 electron、node.js、vue3、vite、TS、TypeORM…… 老大在规划技术栈的时候，把 TS 给加进去了。
    • 之前写的项目都是 JS 的，然后突然说要起一个 TS 的项目，于是就屁颠儿屁颠儿地跑去学习 TS 了。
    • 想必“工作需要”也是大部分人学习这门技术的“初衷”吧！
    • 但是，随着学习地深入，开始意识到 TS 这玩意儿还挺香，于是就主动去学习有关 TS 的更多知识点。
  • 后来是「主动」的 -> 这玩意儿确实对开发有帮助 + 喜欢记录和分享的习惯驱动
    • 首先，体验一段时间的 TS 编程后，发现 TS 是真的香，很多时候它确实能够帮我规避掉那些在 JS 中显得很 low 的错误，这些错误在开发传统的 JS 项目时很难被提前发现，非得等到代码跑起来了才抛出错误 ～ 除此之外，TS 还有不少其他优点，后续笔记慢慢唠……
    • 其次，想要和大伙分享一下自己学习 TS 的一些学习笔记和心得，学点儿东西，做点儿贡献嘛，如果能帮到有需要的小伙伴，那就再好不过了。

9. 🤔 TypeScript 的作者是谁？ ​

Anders Hejlsberg

图 0

10. 🤔 TypeScript 的仓库地址是？ ​

https://github.com/microsoft/TypeScript

11. 🤔 TypeScript 的官网是？ ​

https://www.typescriptlang.org/

12. 🤖 「Top 10 JavaScript errors from 1000+ projects (and how to avoid them)」这篇文章讲了什么？ ​

这篇文章是 Rollbar 在他们分析了 1000 多个项目的错误日志之后，总结出 JavaScript 中最常见的 10 种错误类型，以及每种错误的成因和避免／调试方式。

下面是文章的要点总结 + 我认为特别值得注意的地方：

  • 文章主要内容总结

文章结构基本是：列出一个错误 → 说明这个错误出现的典型场景 → 给出如何预防或修复的建议。以下是这 10 种错误及其应对思路：

序号错误大意出错原因 / 场景避免 / 处理建议
1Uncaught TypeError: Cannot read property …试图读取 undefined 上的属性（比如 obj.prop，但 obj 是 undefined）在使用之前给变量或对象合理地初始化（初始值）
2TypeError: 'undefined' is not an object (evaluating …)Safari 报出的类似于第 1 种的错误本质同上，需要检查变量是否未定义
3TypeError: null is not an object (evaluating …)试图在 null 上调用属性或方法在 DOM 操作时，确保元素已被加载；对变量做空值检查
4(unknown): Script error跨域脚本报错时，浏览器因安全策略而屏蔽具体错误，只显示 “Script error”要启用合适的 CORS / Access-Control-Allow-Origin header + 在 <script> 加 crossorigin="anonymous"
5TypeError: Object doesn't support property在 IE 中调用一个不存在的方法／属性为了兼容 IE，要避免在命名空间内使用 this.someMethod，应改为 Namespace.someMethod
6TypeError: 'undefined' is not a function调用了一个未定义的方法（可能是在不对的上下文中 this 指向错误）常见解决方式是用 .bind(...) 或保存 this 引用 (var self = this)
7Uncaught RangeError递归无限调用导致调用栈溢出，或传入函数参数超出其可接受范围对递归函数要有终止条件；对函数输入参数做边界检查
8TypeError: Cannot read property 'length'在 undefined 或 null 上访问 .length 属性在用 .length 前先判断变量是否定义
9Uncaught TypeError: Cannot set property …试图给 undefined 或 null 的对象设置属性确保对象已初始化
10ReferenceError: event is not defined在事件处理函数中直接用 event 而不是使用函数参数正确地把 event 作为参数传入事件处理函数

在结尾，文章还提到：

  • 很多错误都跟 “null / undefined” 有关，是一类常见的 “空值相关” 问题。
  • 使用静态类型检查工具（如 TypeScript）并开启严格模式（strict）可以在编译阶段捕获这些潜在错误。
  • 即使做好预防，线上仍有不可预见的错误发生，因此需要一种错误监控／日志系统（比如 Rollbar 本身）来在生产环境中采集错误、补充上下文、快速调试。
  • 我的一些补充/建议
  • 这篇文章对于一般前端 / JavaScript 开发者很有实用价值，因为它是基于真实项目数据统计得出的“常见错误”，能帮你在日常开发中有意识地规避这些坑。
  • 在较大或多人协作的项目里，推荐结合静态类型检查（TypeScript / Flow） + 严格 lint 规则 + 单元 / 集成测试 来减少这些空引用、类型不匹配这类低级错误。
  • 同时线上错误监控（比如 Rollbar, Sentry 等）非常重要，因为有些错误在开发 / 测试环境是难以重现的。

13. 🔗 引用 ​

Discussions